<template>
  <div>
    <el-dialog
      v-model="_iconDialogVisible"
      title="选择图标"
      :before-close="handleClose"
      destroy-on-close
      draggable
      width="80%"
    >
      <ul class="mt-[5px] mx-0 mb-0">
        <li
          v-for="icon in data"
          :key="icon"
          class="w-10 h-10 leading-10 border-[1px] border-solid border-[#efefef] p-px m-[4px] text-center text-lg inline-block cursor-pointer"
          @click="emit('success', `fa ${icon}`)"
        >
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="icon"
            placement="top-start"
          >
            <i class="fa" :class="icon"></i>
          </el-tooltip>
        </li>
      </ul>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
})
const emit = defineEmits(['update:dialogVisible', 'success'])
let data = ref<string[]>([])

const _iconDialogVisible = ref<boolean>(false)

watch(
  () => props.dialogVisible,
  () => {
    _iconDialogVisible.value = props.dialogVisible
  }
)

watch(
  () => _iconDialogVisible.value,
  () => {
    emit('update:dialogVisible', _iconDialogVisible.value)
  }
)

const handleClose = () => {
  _iconDialogVisible.value = false
}

onMounted(() => {
  fetch('/font-awesome/less/variables.less')
    .then((res) => res.text())
    .then((res) => {
      var exp = /fa-var-(.*):/gi
      var result
      while ((result = exp.exec(res)) != null) {
        data.value.push('fa-' + result[1])
      }
    })
})
</script>

<style scoped>
li:hover {
  border: 1px solid #000;
}
</style>
